<template>
    <div>
        <Row>
            <i-col span="24">
                <Card>
                                        <Button class="opt-btn" @click="confirmSelection" type="primary" v-if="optType === 'add'">确认选择</Button>
                    <Button class="opt-btn" @click="showAddModal" type="primary" v-if="optType === 'show'">新增</Button>
                    <Button class="opt-btn" @click="removeSelection" type="error" v-if="optType === 'show'">删除</Button>
                    <Button class="opt-btn" @click="setAttrGroup" type="primary" v-if="optType === 'show'">设置规格属性</Button>
                    <Button class="opt-btn" @click="showSearchModal" type="primary">高级搜索</Button>
                    <Tooltip class="opt-btn" content="刷新" placement="right">
                        <Button icon="md-refresh" type="success" shape="circle" @click="searchTable(false, false)"></Button>
                    </Tooltip>
                    <Tooltip class="opt-btn" content="重置搜索" placement="right">
                        <Button icon="md-repeat" type="success" shape="circle" @click="researchTable"></Button>
                    </Tooltip>
                    <div style="margin-top: 20px;">规格属性：{{attrGroups}}</div>
                    <GoodsAttributeTableMultiple ref="table" v-on:searchTable="searchTable" v-on:showDetailModal="showDetailModal"/>
                </Card>
            </i-col>
        </Row>
        <GoodsAttributeSearchModal ref="searchModal" v-on:searchTable="searchTable"/>
        <GoodsAttributeDetailModal ref="detailModal"/>
        
    </div>
</template>

<script>
    import * as utils from '@/api/utils-v2'
    import GoodsAttributeTableMultiple from './GoodsAttributeTableMultiple.vue'
    import GoodsAttributeSearchModal from './GoodsAttributeSearchModal.vue'
    import GoodsAttributeDetailModal from './GoodsAttributeDetailModal.vue'
    
    import {batchSaveGoodsCategoryAttr, batchRemoveGoodsCategoryAttr} from '@/api/goods_category'
    import * as ResponseStatus from '@/api/response-status'
    export default {
        name: 'GoodsAttributeMainMultiple',
        components: {
            GoodsAttributeTableMultiple,
            GoodsAttributeSearchModal,
            GoodsAttributeDetailModal,
            
        },
        props: {
            optType: {
                type: String,
                default: 'show'
            }
        },
        data() {
            return {
                attrGroups: '未设置规格属性',
                selectedData: [],
                selectedDataIdProp: '',
                extraData: {},
             }
        },
        computed: {},
        mounted() {},
        methods: {
            searchTable(reset, clearOldData) {
                utils.search(this, reset, clearOldData)
            },
            researchTable() {
                this.$refs.searchModal.resetForm()
                setTimeout(() => {
                    utils.search(this, true)
                }, 10);
            },
            showDetailModal(row) {
                let detailModal = this.$refs.detailModal
                detailModal.modal.detail = true
                detailModal.form = row
				detailModal.getDictItemsDisplayValue()
            },
            showSearchModal() {
                let searchModal = this.$refs.searchModal
                searchModal.modal.search = true
            },
           showAddModal() {
                this.$emit('showAddModal')
            },
            removeSelection() {
                if (this.$refs.table.table.selections.length === 0) {
                    this.$Message.warning('请选择需要删除的属性')
                    return
                }
                this.$Modal.confirm({
                    title: '确认删除吗？',
                    content: '确认批量删除选择的数据吗？',
                    onOk: () => {
                        let params = []
                        this.$refs.table.table.selections.forEach(item => {
                            params.push(item.id)
                        })
                        batchRemoveGoodsCategoryAttr(this.extraData.categoryId, params).then(res => {
                            const data = res.data
                            if (data.code === ResponseStatus.OK) {
                                this.$Message.info("删除属性成功")
                                this.$refs.table.table.selections = []
                                this.$emit('refresh', this.extraData.categoryId)
                            } else {
                                this.$Message.error(data.message)
                            }
                        }).catch(err => {
                            this.$Message.error(err)
                        })
                    },
                    onCancel: () => {}
                })
            },                                         
            confirmSelection() {
                // 确认选择的逻辑
                if (this.$refs.table.table.selections.length === 0) {
                    this.$Message.warning('请选择需要增加的属性')
                    return
                }
                let params = []
                  this.$refs.table.table.selections.forEach(item => {
                      params.push({
                          goodsCategoryId: this.extraData.categoryId,
                          goodsAttributeId: item.id
                      })
                  })
                  batchSaveGoodsCategoryAttr(params).then(res => {
                      const data = res.data
                      if (data.code === ResponseStatus.OK) {
                      this.$Message.info("新增属性成功")
                       this.$refs.table.table.selections = []
                        this.$emit('closeAddModal')
                        this.$emit('refresh', this.extraData.categoryId)
                      } else {
                      this.$Message.error(data.message)
                      }
                  }).catch(err => {
                      this.$Message.error(err)
                  })
            },
            getAttrGroup() {
                this.attrGroups = '未设置规格属性'
                utils.doPostJson('/goods-category-attr/admin/all-cond',{
                    goodsCategoryId: this.extraData.categoryId,
                    goodsCategoryAttributeIsAttrGroup: 1
                }, {}).then(response => {
                    if (response.data.code === ResponseStatus.OK) {
                        if (response.data.data.total > 0) {
                            this.attrGroups = ''
                            response.data.data.rows.forEach(row => {
                                this.attrGroups += row.goodsAttributeAttrName + '-' + row.goodsAttributeAttrCode + ' '
                            })
                        }
                    } else {
                        this.$Message.error(response.data.message)
                    }
                })
                .catch(error => {
                    console.log(error)
                })
            },
            setAttrGroup() {
                let tableComponent = this.$refs.table
                if (tableComponent.table.selections.length === 0) {
                    this.$Message.warning('请先选择需要设置为属性组合的属性')
                    return
                }
                this.$Spin.show()
                // 保存属性排序
                var params = []
                tableComponent.table.selections.forEach((item, index) => {
                    params.push({
                    goodsCategoryId: this.extraData.categoryId,
                    goodsAttributeId: item.id,
                    goodsCategoryAttributeIsAttrGroup: 1
                    })
                })
                utils.doPostJson('/goods-category-attr/admin/update-attr-group', params, {}).then(response => {
                    this.$Spin.hide()
                    if (response.data.code === ResponseStatus.OK) {
                        this.$emit('closeModal')
                        this.$Message.success('成功设置类目属性组合')
                        this.getAttrGroup(this.extraData.categoryId)
                    }
                })
                .catch(error => {
                    console.log(error)
                })
            },
        }
    }
</script>

<style>
</style>
